<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>杂志展示 - 图文浏览</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .gallery-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        .gallery-header {
            text-align: center;
            margin-bottom: 40px;
            color: white;
        }

        .gallery-title {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .gallery-subtitle {
            font-size: 18px;
            opacity: 0.9;
            margin-bottom: 20px;
        }

        .gallery-stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 20px;
        }

        .stat-item {
            text-align: center;
            padding: 15px 25px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            backdrop-filter: blur(10px);
        }

        .stat-number {
            font-size: 24px;
            font-weight: bold;
            display: block;
        }

        .stat-label {
            font-size: 14px;
            opacity: 0.8;
        }

        .articles-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
            min-height: 400px;
        }

        .article-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
        }

        .article-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
        }

        .article-card:hover::before {
            opacity: 1;
        }

        .article-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0,0,0,0.3);
        }

        .article-image {
            width: 100%;
            height: 200px;
            background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 48px;
            color: white;
            position: relative;
            overflow: hidden;
        }

        .article-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(240, 147, 251, 0.8) 0%, rgba(245, 87, 108, 0.8) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .article-image:hover::before {
            opacity: 1;
        }

        .article-content {
            padding: 25px;
        }

        .article-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #2c3e50;
            line-height: 1.4;
        }

        .article-summary {
            font-size: 14px;
            color: #7f8c8d;
            line-height: 1.6;
            margin-bottom: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 12px;
            color: #95a5a6;
            padding-top: 15px;
            border-top: 1px solid #ecf0f1;
        }

        .article-author {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .author-avatar {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #3498db;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 12px;
        }

        .article-actions {
            display: flex;
            gap: 15px;
            align-items: center;
        }

        .action-btn {
            background: none;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 5px;
            color: #95a5a6;
            transition: color 0.3s ease;
        }

        .action-btn:hover {
            color: #3498db;
        }

        .action-btn.liked {
            color: #e74c3c;
        }

        .pagination {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 40px;
        }

        .page-btn {
            padding: 12px 20px;
            background: rgba(255,255,255,0.2);
            color: white;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .page-btn:hover {
            background: rgba(255,255,255,0.3);
            transform: translateY(-2px);
        }

        .page-btn.active {
            background: #3498db;
        }

        .page-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .article-detail {
            display: none;
            background: white;
            border-radius: 15px;
            padding: 40px;
            margin-bottom: 30px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        .detail-header {
            text-align: center;
            margin-bottom: 30px;
            padding-bottom: 20px;
            border-bottom: 1px solid #ecf0f1;
        }

        .detail-title {
            font-size: 28px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 15px;
            line-height: 1.4;
        }

        .detail-meta {
            display: flex;
            justify-content: center;
            gap: 20px;
            color: #7f8c8d;
            font-size: 14px;
        }

        .detail-content {
            font-size: 16px;
            line-height: 1.8;
            color: #34495e;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .detail-content img {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }

        .detail-content p {
            margin-bottom: 15px;
        }

        .detail-actions {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 20px;
            border-top: 1px solid #ecf0f1;
            border-bottom: 1px solid #ecf0f1;
            margin: 30px 0;
        }

        .detail-action-btn {
            padding: 12px 24px;
            border: 2px solid #3498db;
            background: white;
            color: #3498db;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .detail-action-btn:hover {
            background: #3498db;
            color: white;
        }

        .detail-action-btn.liked {
            background: #e74c3c;
            border-color: #e74c3c;
            color: white;
        }

        .comments-section {
            margin-top: 30px;
        }

        .comments-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
            color: #2c3e50;
        }

        .comment-form {
            background: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .comment-input {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 14px;
        }

        .comment-textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;
            font-size: 14px;
            resize: vertical;
            min-height: 80px;
        }

        .comment-submit {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 14px;
        }

        .comment-submit:hover {
            background: #2980b9;
        }

        .comments-list {
            max-height: 400px;
            overflow-y: auto;
        }

        .comment-item {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            border-left: 4px solid #3498db;
        }

        .comment-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .comment-author {
            font-weight: bold;
            color: #2c3e50;
        }

        .comment-time {
            font-size: 12px;
            color: #7f8c8d;
        }

        .comment-content {
            color: #34495e;
            line-height: 1.6;
        }

        .back-btn {
            position: fixed;
            top: 20px;
            left: 20px;
            background: rgba(255,255,255,0.9);
            color: #2c3e50;
            border: none;
            padding: 12px 20px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 14px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
            z-index: 1000;
        }

        .back-btn:hover {
            background: white;
            transform: translateY(-2px);
        }

        @media (max-width: 768px) {
            .gallery-container {
                padding: 10px;
            }
            
            .gallery-title {
                font-size: 28px;
            }
            
            .articles-container {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .article-detail {
                padding: 20px;
            }
            
            .detail-title {
                font-size: 22px;
            }
            
            .gallery-stats {
                flex-direction: column;
                gap: 15px;
            }
        }
    </style>
</head>
<body>
    <button class="back-btn" onclick="gallery.showList()" style="display: none;" id="backBtn">← 返回列表</button>
    
    <div class="gallery-container">
        <div class="gallery-header" id="galleryHeader">
            <h1 class="gallery-title">📖 精品杂志</h1>
            <p class="gallery-subtitle">发现精彩内容，分享美好时光</p>
            <div class="gallery-stats">
                <div class="stat-item">
                    <span class="stat-number" id="totalArticles">0</span>
                    <span class="stat-label">篇文章</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="totalViews">0</span>
                    <span class="stat-label">次浏览</span>
                </div>
                <div class="stat-item">
                    <span class="stat-number" id="totalLikes">0</span>
                    <span class="stat-label">个点赞</span>
                </div>
            </div>
        </div>

        <div class="articles-container" id="articlesContainer">
            <!-- 文章卡片将在这里动态生成 -->
        </div>

        <div class="article-detail" id="articleDetail">
            <!-- 文章详情将在这里显示 -->
        </div>

        <div class="pagination" id="pagination">
            <!-- 分页按钮将在这里生成 -->
        </div>
    </div>

    <script>
        class ArticleGallery {
            constructor() {
                this.articles = [];
                this.currentPage = 1;
                this.articlesPerPage = 6;
                this.currentArticle = null;
                this.apiBase = 'http://localhost:8080/api';
                this.init();
            }

            init() {
                this.loadArticles();
                this.setupEventListeners();
            }

            setupEventListeners() {
                // 键盘翻页支持
                document.addEventListener('keydown', (e) => {
                    if (this.currentArticle) {
                        if (e.key === 'ArrowLeft') {
                            this.navigateArticle(-1);
                        } else if (e.key === 'ArrowRight') {
                            this.navigateArticle(1);
                        } else if (e.key === 'Escape') {
                            this.showList();
                        }
                    }
                });
            }

            async loadArticles() {
                try {
                    // 从本地存储加载文章数据（实际项目中应该从API获取）
                    const articles = JSON.parse(localStorage.getItem('articles') || '[]');
                    
                    // 如果没有文章，显示一些示例数据
                    if (articles.length === 0) {
                        this.articles = this.getSampleArticles();
                    } else {
                        this.articles = articles.map(article => ({
                            ...article,
                            views: Math.floor(Math.random() * 1000) + 100,
                            likes: Math.floor(Math.random() * 100) + 10,
                            comments: Math.floor(Math.random() * 50) + 5
                        }));
                    }

                    this.renderArticles();
                    this.updateStats();
                } catch (error) {
                    console.error('加载文章失败:', error);
                    this.articles = this.getSampleArticles();
                    this.renderArticles();
                }
            }

            getSampleArticles() {
                return [
                    {
                        id: '1',
                        title: '探索人工智能的未来发展趋势',
                        summary: '人工智能正在改变我们的生活方式，从智能家居到自动驾驶，AI技术正在各个领域发挥着重要作用。本文将深入探讨AI技术的最新进展和未来发展方向。',
                        author: '科技观察员',
                        image: '🤖',
                        created_at: '2024-01-15T10:30:00Z',
                        views: 856,
                        likes: 128,
                        comments: 23
                    },
                    {
                        id: '2',
                        title: '健康生活方式：从饮食开始',
                        summary: '合理的饮食习惯是健康生活的基础。本文将介绍如何通过科学的饮食搭配，提高身体免疫力，预防各种疾病，让您拥有更健康的生活。',
                        author: '营养师小王',
                        image: '🥗',
                        created_at: '2024-01-14T15:20:00Z',
                        views: 642,
                        likes: 89,
                        comments: 15
                    },
                    {
                        id: '3',
                        title: '旅行摄影技巧分享',
                        summary: '旅行中的美好瞬间值得被记录。本文将分享一些实用的旅行摄影技巧，帮助您拍出更精彩的旅行照片，记录旅途中的每一个精彩时刻。',
                        author: '摄影师李明',
                        image: '📸',
                        created_at: '2024-01-13T09:45:00Z',
                        views: 423,
                        likes: 67,
                        comments: 12
                    },
                    {
                        id: '4',
                        title: '职场沟通的艺术',
                        summary: '良好的沟通能力是职场成功的关键因素。本文将探讨如何在职场中建立有效的人际关系，提升沟通技巧，让您在职场中游刃有余。',
                        author: '职场导师',
                        image: '💼',
                        created_at: '2024-01-12T14:10:00Z',
                        views: 789,
                        likes: 145,
                        comments: 31
                    },
                    {
                        id: '5',
                        title: '环保生活从小事做起',
                        summary: '环保不是口号，而是需要每个人从日常生活做起。本文将介绍一些简单易行的环保生活方式，让我们一起为地球的未来贡献自己的力量。',
                        author: '环保志愿者',
                        image: '🌱',
                        created_at: '2024-01-11T11:25:00Z',
                        views: 534,
                        likes: 92,
                        comments: 18
                    },
                    {
                        id: '6',
                        title: '投资理财入门指南',
                        summary: '理财是每个人都应该掌握的重要技能。本文将为投资新手提供实用的理财建议和投资策略，帮助您更好地管理个人财务，实现财富增长。',
                        author: '理财专家',
                        image: '💰',
                        created_at: '2024-01-10T16:40:00Z',
                        views: 967,
                        likes: 156,
                        comments: 28
                    }
                ];
            }

            renderArticles() {
                const container = document.getElementById('articlesContainer');
                const start = (this.currentPage - 1) * this.articlesPerPage;
                const end = start + this.articlesPerPage;
                const pageArticles = this.articles.slice(start, end);

                container.innerHTML = pageArticles.map(article => `
                    <div class="article-card" onclick="gallery.showArticle('${article.id}')">
                        <div class="article-image">${article.image || '📰'}</div>
                        <div class="article-content">
                            <h3 class="article-title">${article.title}</h3>
                            <p class="article-summary">${article.summary}</p>
                            <div class="article-meta">
                                <div class="article-author">
                                    <div class="author-avatar">${article.author.charAt(0)}</div>
                                    <span>${article.author}</span>
                                </div>
                                <div class="article-actions">
                                    <button class="action-btn" onclick="event.stopPropagation(); gallery.toggleLike('${article.id}')" id="like-${article.id}">
                                        <span>❤️</span>
                                        <span>${article.likes}</span>
                                    </button>
                                    <button class="action-btn" onclick="event.stopPropagation();">
                                        <span>💬</span>
                                        <span>${article.comments}</span>
                                    </button>
                                    <button class="action-btn" onclick="event.stopPropagation();">
                                        <span>👁️</span>
                                        <span>${article.views}</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('');

                this.renderPagination();
            }

            renderPagination() {
                const totalPages = Math.ceil(this.articles.length / this.articlesPerPage);
                const pagination = document.getElementById('pagination');

                let html = '';
                
                // 上一页
                html += `<button class="page-btn" onclick="gallery.changePage(${this.currentPage - 1})" ${this.currentPage === 1 ? 'disabled' : ''}>上一页</button>`;
                
                // 页码
                for (let i = 1; i <= totalPages; i++) {
                    if (i === 1 || i === totalPages || (i >= this.currentPage - 1 && i <= this.currentPage + 1)) {
                        html += `<button class="page-btn ${i === this.currentPage ? 'active' : ''}" onclick="gallery.changePage(${i})">${i}</button>`;
                    } else if (i === this.currentPage - 2 || i === this.currentPage + 2) {
                        html += `<span class="page-btn" style="background: none; cursor: default;">...</span>`;
                    }
                }
                
                // 下一页
                html += `<button class="page-btn" onclick="gallery.changePage(${this.currentPage + 1})" ${this.currentPage === totalPages ? 'disabled' : ''}>下一页</button>`;

                pagination.innerHTML = html;
            }

            changePage(page) {
                const totalPages = Math.ceil(this.articles.length / this.articlesPerPage);
                if (page >= 1 && page <= totalPages) {
                    this.currentPage = page;
                    this.renderArticles();
                    window.scrollTo(0, 0);
                }
            }

            showArticle(articleId) {
                const article = this.articles.find(a => a.id === articleId);
                if (!article) return;

                this.currentArticle = article;
                
                // 增加浏览次数
                article.views++;
                this.updateStats();

                // 显示文章详情
                const detailContainer = document.getElementById('articleDetail');
                detailContainer.innerHTML = `
                    <div class="detail-header">
                        <h1 class="detail-title">${article.title}</h1>
                        <div class="detail-meta">
                            <span>👤 ${article.author}</span>
                            <span>📅 ${new Date(article.created_at).toLocaleDateString('zh-CN')}</span>
                            <span>👁️ ${article.views} 次浏览</span>
                        </div>
                    </div>
                    <div class="detail-content">
                        <div style="text-align: center; margin-bottom: 30px;">
                            <div style="font-size: 72px; margin-bottom: 20px;">${article.image || '📰'}</div>
                        </div>
                        <p>${article.summary}</p>
                        <p>这里是文章的详细内容。在实际应用中，这里会显示完整的文章内容，包括图片、段落、标题等富文本内容。</p>
                        <p>文章内容支持Markdown格式，可以包含代码块、表格、列表等各种格式。</p>
                    </div>
                    <div class="detail-actions">
                        <button class="detail-action-btn ${this.isLiked(article.id) ? 'liked' : ''}" onclick="gallery.toggleLike('${article.id}')" id="detail-like-${article.id}">
                            <span>❤️</span>
                            <span id="detail-like-count-${article.id}">${article.likes}</span>
                        </button>
                        <button class="detail-action-btn" onclick="gallery.scrollToComments()">
                            <span>💬</span>
                            <span>${article.comments}</span>
                        </button>
                        <button class="detail-action-btn" onclick="gallery.shareArticle('${article.id}')">
                            <span>📤</span>
                            <span>分享</span>
                        </button>
                    </div>
                    <div class="comments-section">
                        <h3 class="comments-title">💬 评论 (${article.comments})</h3>
                        <div class="comment-form">
                            <input type="text" class="comment-input" id="commentAuthor" placeholder="您的昵称">
                            <textarea class="comment-textarea" id="commentContent" placeholder="写下您的评论..."></textarea>
                            <button class="comment-submit" onclick="gallery.submitComment('${article.id}')">发表评论</button>
                        </div>
                        <div class="comments-list" id="commentsList">
                            ${this.renderComments(article.id)}
                        </div>
                    </div>
                `;

                // 显示详情，隐藏列表
                document.getElementById('galleryHeader').style.display = 'none';
                document.getElementById('articlesContainer').style.display = 'none';
                document.getElementById('pagination').style.display = 'none';
                document.getElementById('articleDetail').style.display = 'block';
                document.getElementById('backBtn').style.display = 'block';

                window.scrollTo(0, 0);
            }

            showList() {
                document.getElementById('galleryHeader').style.display = 'block';
                document.getElementById('articlesContainer').style.display = 'grid';
                document.getElementById('pagination').style.display = 'flex';
                document.getElementById('articleDetail').style.display = 'none';
                document.getElementById('backBtn').style.display = 'none';
                
                this.currentArticle = null;
                window.scrollTo(0, 0);
            }

            navigateArticle(direction) {
                if (!this.currentArticle) return;

                const currentIndex = this.articles.findIndex(a => a.id === this.currentArticle.id);
                const newIndex = currentIndex + direction;

                if (newIndex >= 0 && newIndex < this.articles.length) {
                    this.showArticle(this.articles[newIndex].id);
                }
            }

            toggleLike(articleId) {
                const article = this.articles.find(a => a.id === articleId);
                if (!article) return;

                const liked = this.isLiked(articleId);
                
                if (liked) {
                    article.likes--;
                    this.removeLike(articleId);
                } else {
                    article.likes++;
                    this.addLike(articleId);
                }

                // 更新UI
                const likeBtn = document.getElementById(`like-${articleId}`);
                const detailLikeBtn = document.getElementById(`detail-like-${articleId}`);
                const detailLikeCount = document.getElementById(`detail-like-count-${articleId}`);

                if (likeBtn) {
                    likeBtn.classList.toggle('liked', !liked);
                    likeBtn.innerHTML = `<span>❤️</span><span>${article.likes}</span>`;
                }

                if (detailLikeBtn) {
                    detailLikeBtn.classList.toggle('liked', !liked);
                }

                if (detailLikeCount) {
                    detailLikeCount.textContent = article.likes;
                }

                this.updateStats();
            }

            isLiked(articleId) {
                const liked = localStorage.getItem(`liked_${articleId}`);
                return liked === 'true';
            }

            addLike(articleId) {
                localStorage.setItem(`liked_${articleId}`, 'true');
            }

            removeLike(articleId) {
                localStorage.removeItem(`liked_${articleId}`);
            }

            renderComments(articleId) {
                // 从本地存储获取评论
                const comments = JSON.parse(localStorage.getItem(`comments_${articleId}`) || '[]');
                
                if (comments.length === 0) {
                    return '<div style="text-align: center; color: #999; padding: 20px;">暂无评论，快来发表第一条评论吧！</div>';
                }

                return comments.map(comment => `
                    <div class="comment-item">
                        <div class="comment-header">
                            <span class="comment-author">${comment.author}</span>
                            <span class="comment-time">${new Date(comment.created_at).toLocaleString('zh-CN')}</span>
                        </div>
                        <div class="comment-content">${comment.content}</div>
                    </div>
                `).join('');
            }

            submitComment(articleId) {
                const author = document.getElementById('commentAuthor').value.trim();
                const content = document.getElementById('commentContent').value.trim();

                if (!author || !content) {
                    alert('请填写昵称和评论内容');
                    return;
                }

                const comment = {
                    id: Date.now().toString(),
                    author: author,
                    content: content,
                    created_at: new Date().toISOString()
                };

                // 保存到本地存储
                const comments = JSON.parse(localStorage.getItem(`comments_${articleId}`) || '[]');
                comments.unshift(comment);
                localStorage.setItem(`comments_${articleId}`, JSON.stringify(comments));

                // 更新评论数
                const article = this.articles.find(a => a.id === articleId);
                if (article) {
                    article.comments = comments.length;
                }

                // 清空输入框
                document.getElementById('commentContent').value = '';

                // 重新渲染评论
                document.getElementById('commentsList').innerHTML = this.renderComments(articleId);

                // 更新评论数显示
                this.renderArticles();
            }

            scrollToComments() {
                const commentsSection = document.querySelector('.comments-section');
                if (commentsSection) {
                    commentsSection.scrollIntoView({ behavior: 'smooth' });
                }
            }

            shareArticle(articleId) {
                const article = this.articles.find(a => a.id === articleId);
                if (!article) return;

                if (navigator.share) {
                    navigator.share({
                        title: article.title,
                        text: article.summary,
                        url: window.location.href
                    });
                } else {
                    // 复制到剪贴板
                    const shareText = `${article.title}\n${article.summary}\n${window.location.href}`;
                    navigator.clipboard.writeText(shareText).then(() => {
                        alert('分享链接已复制到剪贴板');
                    });
                }
            }

            updateStats() {
                const totalArticles = this.articles.length;
                const totalViews = this.articles.reduce((sum, article) => sum + article.views, 0);
                const totalLikes = this.articles.reduce((sum, article) => sum + article.likes, 0);

                document.getElementById('totalArticles').textContent = totalArticles;
                document.getElementById('totalViews').textContent = totalViews.toLocaleString();
                document.getElementById('totalLikes').textContent = totalLikes.toLocaleString();
            }
        }

        // 初始化图库
        const gallery = new ArticleGallery();

        // 页面加载完成提示
        window.addEventListener('load', () => {
            console.log('📖 杂志展示页面已加载完成');
            console.log('🎯 支持翻页浏览、点赞评论、分享等功能');
        });
    </script>
</body>
</html>